<template>
  <div class="section">
    <div class="main_info">
      <el-col :span="4" class="left">
        <p class="textTips" v-if="activeSteps != 2">内容将自动保存</p>
      </el-col>
      <el-col :span="18">
        <el-steps :active="activeSteps" simple process-status="process" finish-status="success">
          <el-step title="编辑测评表" icon="el-icon-edit" @click.native="onStepClick(0)"></el-step>
          <el-step
            title="发布测评表"
            icon="el-icon-upload"
            :class="{ disabled: ['-2', '-1', '0'].includes(status) }"
            @click.native="onStepClick(1)"></el-step>
          <el-step
            title="数据报表"
            icon="el-icon-s-data"
            :class="{ disabled: ['-2', '-1', '0'].includes(status) }"
            @click.native="onStepClick(2)"></el-step>
        </el-steps>
      </el-col>
    </div>
    <div class="main_con" :class="{ padding0: activeSteps == 2 }">
      <!-- 编辑测评表 S -->
      <EvaluationEdit
        ref="EvaluationEdit"
        v-if="activeSteps == 0"
        @onCheckSuccess="onCheckSuccess"
        @updateTitle="onTitleUpdate"></EvaluationEdit>
      <!-- 编辑测评表 E-->
      <!-- 发布测评表 S-->
      <EvaluationPush
        ref="EvaluationPush"
        @pushSuccess="pushSuccess"
        v-if="activeSteps == 1 && subActiveSteps == 0"></EvaluationPush>
      <!-- 发布测评表 E-->
      <!-- 下载测评表 S-->
      <EvaluationDownload ref="EvaluationDownload" v-if="activeSteps == 1 && subActiveSteps == 1"></EvaluationDownload>
      <!-- 下载测评表 E-->
      <!-- 数据报表 S-->
      <EvaluationData v-if="activeSteps == 2"></EvaluationData>
      <!-- 数据报表 E-->
    </div>
    <!-- 预览 s -->
    <EvaluationView ref="EvaluationView"></EvaluationView>
    <!-- 预览 e -->
    <!-- 操作按钮区 -->
    <div v-if="activeSteps !== 2" class="task-btn-box">
      <el-button
        v-if="btns.includes('cancel')"
        size="small"
        class="btnBorder"
        plain
        @click.stop="handleClick('cancel')">
        取 消
      </el-button>
      <el-button v-if="btns.includes('del')" size="small" class="btnBorder" plain @click.stop="handleClick('del')">
        删 除
      </el-button>
      <el-button
        v-if="btns.includes('review')"
        size="small"
        class="btnBorder"
        plain
        @click.stop="handleClick('review')">
        预 览
      </el-button>
      <el-button
        v-if="btns.includes('save')"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('save')">
        暂 存
      </el-button>
      <el-button
        v-if="btns.includes('withdraw')"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('withdraw')">
        撤 回
      </el-button>
      <el-button
        v-if="btns.includes('edit1')"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('edit1')">
        编 辑
      </el-button>
      <el-button
        v-if="btns.includes('edit')"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('edit')">
        修改人员
      </el-button>
      <el-button
        v-if="btns.includes('submit')"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('submit')">
        提交审核
      </el-button>
      <el-button
        v-if="btns.includes('next')"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('next')">
        下一步
      </el-button>
      <el-button
        v-if="btns.includes('release')"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('release')">
        确定发布
      </el-button>
      <el-button
        v-if="btns.includes('download')"
        class="btnBg"
        size="small"
        type="primary"
        @click="handleClick('download')">
        全部下载
      </el-button>
      <el-button
        v-if="btns.includes('stop')"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('stop')">
        暂停收集
      </el-button>
      <el-button
        v-if="btns.includes('goon')"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('goon')">
        恢复收集
      </el-button>
      <el-button
        v-if="btns.includes('invalid') && evaluationInfo.dataValid == '1' && evaluationInfo.assessmentStatus == '2'"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('invalid')">
        无 效
      </el-button>
    </div>
    <!-- <div v-if="activeSteps === 2 && evaluationInfo.assessmentStatus == '3'" class="task-btn-box">
      <el-button
        v-if="btns.includes('invalid') && evaluationInfo.dataValid == '1'"
        size="small"
        class="btnBg"
        type="primary"
        @click.stop="handleClick('invalid')">
        无 效
      </el-button>
    </div> -->
    <!-- 提示 start -->
    <XnDialog
      title="提示"
      :visible.sync="showTips"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="400px"
      append-to-body
      class="collect_dialog"
      @close="showTips = false">
      <template>
        <div>
          <i class="color_warning_dia el-icon-warning"></i>
          {{ tipsMsg }}
        </div>
        <div class="bot_tips bot_tips_end">
          <el-button class="btnBorder" type="primary" @click.stop="onCloseTips" size="small">{{ '取 消' }}</el-button>
          <el-button class="btnBg" type="primary" @click.stop="onSubmit" size="small">确 定</el-button>
        </div>
      </template>
    </XnDialog>
    <!-- 提示 end -->
    <!-- 提醒 start -->
    <XnDialog
      title="提醒"
      :visible.sync="showCheck"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :center="true"
      width="400px"
      append-to-body
      class="collect_dialog"
      @close="showCheck = false">
      <template>
        <div>
          {{ checkMsg }}
        </div>
        <div class="bot_tips bot_tips_end">
          <el-button class="btnBg" type="primary" @click.stop="showCheck = false" size="small">确 定</el-button>
        </div>
      </template>
    </XnDialog>
    <!-- 提醒 end -->
  </div>
</template>

<script>
import {
  delAssessment,
  updateAssessmentCheckStatus,
  updateAssessmentStatus,
  checkSubmitCondition,
  updateAssessmentDataStatus,
} from '@apis/mzEvaluation.js'
import { delBulletion, dataExport } from '@apis/notice.js'
import EvaluationEdit from './components/EvaluationEdit.vue'
import EvaluationPush from './components/EvaluationPush.vue'
import EvaluationDownload from './components/EvaluationDownload'
import EvaluationData from './components/EvaluationData'
import EvaluationView from './components/EvaluationView'
import XnDialog from '@com/xnDialog.vue'
export default {
  name: 'EvaluationAddEditNew',
  components: {
    EvaluationEdit,
    EvaluationPush,
    EvaluationDownload,
    EvaluationData,
    EvaluationView,
    XnDialog,
  },
  props: {
    evaluationInfo: {
      type: Object,
      default: () => {},
    },
  },
  emits: ['success'],
  watch: {
    evaluationInfo: {
      handler(obj) {
        if (obj && obj.id) {
          this.id = obj.id
          this.status = obj.assessmentStatus
          this.subActiveSteps = ['2', '3', '4'].includes(this.status) ? 1 : 0
          this.activeSteps = this.status === '3' ? 2 : ['2', '4'].includes(this.status) ? 1 : 0
          this.getTaskBtns()
        }
      },
    },
  },

  data() {
    return {
      id: '',
      loading2: false,
      activeSteps: 0,
      subActiveSteps: 0, // 判断是否发布成功，1-成功，0-未发布
      status: '',
      btns: [],
      showTips: false,
      tipsMsg: '',
      tipsType: '',
      showCheck: false,
      checkMsg: '',
    }
  },
  methods: {
    onStepClick(type) {
      if (!this.evaluationInfo.id) return
      if (!['-2', '-1', '0'].includes(this.status)) {
        if (this.status === '1' && type === 1) {
          if (this.$refs.EvaluationEdit) {
            this.$refs.EvaluationEdit.onCheckEmpty()
          }
          return
        }
        this.activeSteps = type
      }
      this.getTaskBtns()
    },
    onTitleUpdate(str) {
      this.$emit('updateTitle', str)
    },
    /* 导出 */
    onExport() {
      const checkResultStr = this.checkResult.join(',')
      const req = `?bulletionId=${checkResultStr}`
      const link = document.createElement('a')
      link.href = dataExport(req)
      link.target = 'targetName'
      link.click()
    },
    /* 下一步校验成功 */
    onCheckSuccess() {
      this.subActiveSteps = 0
      this.activeSteps = 1
      this.getTaskBtns()
    },
    /* 发布成功 */
    pushSuccess(data) {
      if (data) {
        this.subActiveSteps = 1
        this.$emit('success', 'release')
      }
    },
    /* 删除 */
    onDel(row) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delBulletion({
            bulletionId: row.bulletionId,
          }).then(res => {
            if (res.status === 200) {
              this.$message.success(res.message)
              this.initdata()
            }
          })
        })
        .catch(() => {})
    },

    /* 获取按钮 */
    getTaskBtns() {
      switch (this.status) {
        case '-2': // 草稿
          this.btns = ['del', 'review', 'save', 'edit', 'submit'] // 删除、预览、暂存、修改人员、提交审核
          return
        case '-1': // 待审核
          this.btns = ['review', 'withdraw'] // 预览、撤回
          return
        case '0': // 审核未通过
          this.btns = ['review', 'edit1'] // 预览、编辑
          return
        case '1': // 未开始
          if (this.activeSteps === 0) {
            // 编辑阶段
            this.btns = ['review', 'next'] // 预览、下一步
          } else if (this.activeSteps === 1) {
            // 发布阶段
            this.btns = ['review', 'release'] // 预览、确认发布
          }
          return
        case '2': // 收集中
          this.btns = ['review', 'invalid'] // 预览、有效的
          if (this.activeSteps === 1) {
            this.btns.push('download') // 全部下载
          }
          return
        case '3': // 已结束
          this.btns = ['review', 'invalid'] // 预览、有效的
          if (this.activeSteps === 1) {
            this.btns.push('download') // 全部下载
          }
          return
        case '4': // 已暂停
          this.btns = ['review', 'goon'] // 预览、恢复收集
          return
        default:
          this.btns = ['review']
      }
    },

    /* 点击事件处理 */
    handleClick(type) {
      this.tipsType = type
      switch (type) {
        case 'del':
          this.tipsMsg = '确定删除该民主测评表？'
          this.showTips = true
          return
        case 'save':
          this.$message.success('保存成功')
          return
        case 'stop':
          this.tipsMsg = '确定暂停收集？'
          this.showTips = true
          return
        case 'goon':
          this.tipsMsg = '确定恢复收集？'
          this.showTips = true
          return
        case 'submit':
          this.checkEvaTask()
          return
        case 'edit':
          if (this.$refs.EvaluationEdit) {
            this.$refs.EvaluationEdit.visibleUsers = true
          }
          return
        case 'edit1':
          this.editTask('5')
          return
        case 'withdraw':
          this.tipsMsg = '确定撤回该民主测评表？'
          this.showTips = true
          return
        case 'next':
          if (this.$refs.EvaluationEdit) {
            this.$refs.EvaluationEdit.onCheckEmpty()
          }
          return
        case 'review':
          if (this.$refs.EvaluationView) {
            this.$refs.EvaluationView.show()
          }
          return
        case 'release':
          if (this.$refs.EvaluationPush) {
            this.$refs.EvaluationPush.setData()
          }
          return
        case 'invalid':
          this.tipsMsg = '确定设置该民主测评表无效？'
          this.showTips = true
          return
        case 'download': // 全部下载
          this.$refs.EvaluationDownload.onExport()
          return
        default:
          this.tipsMsg = ''
          this.showTips = false
      }
    },

    /* 关闭提示弹窗 */
    onCloseTips() {
      this.showTips = false
      this.tipsMsg = ''
    },
    /* 确定事件 */
    onSubmit() {
      this.onCloseTips()
      if (this.tipsType === 'del') {
        this.delTask()
      } else if (this.tipsType === 'submit') {
        this.submitTask()
      } else if (this.tipsType === 'withdraw') {
        this.editTask('4')
      } else if (this.tipsType === 'stop') {
        this.onPauseStart('4')
      } else if (this.tipsType === 'goon') {
        this.onPauseStart('2')
      } else if (this.tipsType === 'invalid') {
        this.invalidTask()
      }
    },

    /* 检测测评任务是否符合要求 */
    checkEvaTask() {
      checkSubmitCondition({
        id: this.id || this.$route.query.id,
      }).then(res => {
        if (res.status === 200) {
          const { status = 0, tips = '' } = res.data || {}
          if (status === 0) {
            this.tipsMsg = '确定提交审核该民主测评表？'
            this.showTips = true
          } else {
            this.checkMsg = tips
            this.showCheck = true
          }
        }
      })
    },

    // 删除测评任务
    delTask() {
      delAssessment({
        id: this.id || this.$route.query.id,
      }).then(res => {
        if (res.status === 200) {
          this.$message.success('删除成功')
          this.$emit('success', 'del')
        }
      })
    },
    // 编辑测评任务
    editTask(type) {
      updateAssessmentCheckStatus({
        assessmentStatus: type, // 4-撤销审核,5-审核不通过编辑回到草稿
        assessmentId: this.id || this.$route.query.id,
      }).then(res => {
        if (res.status === 200) {
          this.$message.success('操作成功')
          this.$emit('success', 'edit')
        }
      })
    },
    // 暂停、继续收集
    onPauseStart(type) {
      updateAssessmentStatus({
        id: this.id || this.$route.query.id,
        assessmentStatus: type,
      }).then(res => {
        if (res.status === 200) {
          this.$message.success('操作成功')
          this.$emit('success', type === '4' ? 'stop' : 'goon')
        }
      })
    },
    // 提交审核测评任务
    submitTask() {
      updateAssessmentCheckStatus({
        assessmentId: this.id || this.$route.query.id,
        assessmentStatus: '1',
      }).then(res => {
        if (res.status === 200) {
          this.$message.success('提交审核成功')
          this.showTips = false
          this.$emit('success', 'submit')
        }
      })
    },
    // 设置民主测评表无效
    invalidTask() {
      updateAssessmentDataStatus({
        assessmentId: this.id || this.$route.query.id,
        dataValid: '0',
      }).then(res => {
        if (res.status === 200) {
          this.$message.success('操作成功')
          this.showTips = false
          this.$emit('success', 'invalid')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.section {
  height: 100%;
  background-color: #fff;
  // box-shadow: -4px 3px 4px 0 rgba(0, 0, 0, 0.12);
  position: relative;
  border: 1px solid #dcdfe6;
  .main_info {
    display: flex;
    align-items: center;
    height: 70px;
    // box-shadow: 0 0 15px 0 rgba(2, 2, 2, 0.22);
    padding: 0 30px;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #dcdfe6;
    .left {
      height: 100%;
      display: flex;
      align-items: center;

      .textTips {
        font-size: 15px;
        color: #999;
      }

      .commit {
        display: flex;
        float: right;
      }
    }
    .el-steps--simple {
      padding: 13px 8%;
      .el-step {
        cursor: pointer;
        &.disabled {
          cursor: default;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .main_con {
    margin-top: 20px;
    padding: 0 30px;
    height: calc(100% - 150px);
    &.padding0 {
      height: calc(100% - 70px);
      padding: 0;
      margin-top: 0;
    }
  }

  .task-btn-box {
    position: absolute;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #f5f7fa;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
